<template>
  <div v-if="isShow" class="rpg-dialog" @click="increase">
    <img :src="dialogue.avatar" class="rpg-dialog__role" />
    <div class="rpg-dialog__body">
      {{ contentRef.value }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  computed,
  Ref,
  PropType,
  defineProps,
  defineEmits
} from "vue";
import { dialogueInterface } from "../../interface";
import useType from "./useTyped";
  
const { dialogueArr } = defineProps({
  /**
   * 对话的内容
   */
  dialogueArr: {
    required: true,
    type: Array as PropType<Array<dialogueInterface>>,
    default: () => [],
  },
})

const emit = defineEmits(['close'])

let isShow = ref(true); // 显示对话框的开关
let contentRef = ref() as Ref<Ref<string>>; // ref对象接收一个ref对象
let dialogueIndex = ref(0); // 当前哪一个对话框
const dialogueCopy = dialogueArr.slice() as Array<dialogueInterface>; // 剧本数组

const dialogue = computed(() => {
  return dialogueCopy[dialogueIndex.value];
});

// 外面用一层ref的value去接传递过来的ref对象，因为里边的ref的content是在时刻变化的，需要保持它的响应式值
contentRef.value = useType(dialogue.value.content);

// 点击则进入下一个对话内容，如果没有下一个的话，则把窗口隐藏
function increase() {
  dialogueIndex.value++;
  if (dialogueIndex.value >= dialogueArr.length) {
    isShow.value = false;
    emit("close");
    return;
  }
  // 把下个内容做成打字的效果
  contentRef.value = useType(dialogue.value.content);
}
</script>

<style lang="scss" scoped>
.rpg-dialog {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 15px 10px;
  border-radius: 6px;
  background-color: #829ada;
  border: 1px solid #8296da;
  box-shadow: 1px 2px 4px #7992d6;
  .rpg-dialog__role {
    width: 50px;
    position: absolute;
    left: 0;
    top: -100%;
  }
  .rpg-dialog__body {
    padding-left: 60px;
    font-size: 14px;
    color: #fff;
  }
}
</style>
